<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>注册</title>
		<style type="text/css">
			#div{
				width: 400px;
				height: 350px;
				margin: 50px auto 0;
				/* background-color: #a9a9a9; */
				background-color: antiquewhite;
			}
			form{
				width: 300px;
				margin: 0 auto;
				text-align: center;
			}
			h3{
				text-align: center;
			}
			input{
				outline: none;
			}
			#sub{
				width: 174px;
				height: 25px;
				border-radius: 8px;
				border: none;
				background-color: #00FFFF;
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<h3>注册</h3>
			<form action="登录页面.html" method="get" onsubmit="return submt()">
				<table>
					<tr height="45px">
						<td width="74px">账号</td>
						<td width="175px">
							<input type="text" name="username" id="username" alt="账号" placeholder="请输入账号" onblur="checkName()" />
							<span id="username_span"></span>
						</td>
					</tr>
					<tr height="45px">
						<td>密码</td>
						<td>
							<input type="password" alt="密码" id="pwd" onblur="checkPwd()" placeholder="输入6位数密码" />
							<span id="pwd_span"></span>
						</td>
					</tr>
					<tr height="45px">
						<td>确认密码</td>
						<td>
							<input type="password" alt="密码" id="pwds" onblur="checkPwds()" placeholder="再次输入密码" />
							<span id="pwds_span"></span>
						</td>
					</tr>
				</table>
				<br>
				<input type="submit" id="sub" value="保存" onclick="submt()"/>
			</form>
		</div>

		<script type="text/javascript">
			//用户名校验方法
			function checkName() {
				var reg = /^[\u4e00-\u9fa5]{2,5}$/;
				return check("username", reg);
			}
			//密码校验方法
			function checkPwd() {
				var reg = /^\d{6}$/;
				return check("pwd", reg);
			}
			//确认密码校验
			function checkPwds() {
				var pwd = document.getElementById("pwd").value;
				var pwds = document.getElementById("pwds").value;
				var span = document.getElementById("pwds_span");
				if (pwds == pwd) {
					span.innerText = "√";
					span.style.color = "green";
				} else {
					span.innerText = "×密码输入错误";
					span.style.color = "red";
				}
			}
			//提取公共的方法
			function check(id, reg) {
				//获得输入的值
				var uname = document.getElementById(id);
				var value = uname.value;
				var alt = uname.alt;
				//获得span对象
				var span = document.getElementById(id + "_span");
				if (value == null || value == "") {
					span.innerText = "×" + alt + "不能为空";
					span.style.color = "red";
					return false;
				} else if (reg.test(value)) {
					span.innerText = "√";
					span.style.color = "green";
					return true;
				} else {
					span.innerText = "×不合法";
					span.style.color = "red";
					return false;
				}
			}
			function submt() {
				var flag = checkName() && checkPwd() && checkPwds();
				return flag;
			}
		</script>

	</body>
</html>
